<template>
	<view class="content">
		<view class="header">
			<view class="accountLine">
				<view class="account">
					<view class="">
						游客
					</view>
					<view class="ticket">
						当前消费积分数量：1566
					</view>
				</view>
				<button type="default" size="mini" class="signBtn">签到</button>
			</view>
			<view class="broughtLine">
				<button type="default" size="mini" class="buyBtn" @click="buyIt">买入</button>
				<button type="default" size="mini" class="saleBtn">卖出</button>
			</view>
		</view>

		<view class="quotes">
			<view class="title">
				行情走势
			</view>
			<view class="quotesItem">
				<view>
					日期
				</view>
				<view>
					成交量
				</view>
				<view>
					走势
				</view>
			</view>
			<view :class="['quotesItem',index==quotes.length-1?'':'b-b']" v-for="(item,index) in quotes" :key="index">
				<view class="date">
					{{item.date}}
				</view>
				<view>
					{{item.account}}
				</view>
				<view :class="['quotesl',item.plus?'plus':'sub']">
					{{item.plus?'+':'-'}}{{item.quote}}
				</view>
			</view>
		</view>
		<modal ref='buy' title='购买消费积分' titlebg='#ee5b25' width="600rpx">
			<view class="ticketsContain">
				<view class="itemOutter" v-for="(item,index) in combons" :key='index' @click="clickItem(index)">
					<view :class="['ticketItem',currentTicket==index?'ticketActive':'unactive']">
						<view :class="['score',currentTicket==index?'activeBo':'unActiveBo']">
							{{item.score}}分
						</view>
						<view class="ticket">
							{{item.tickets}}消费积分
						</view>
					</view>
				</view>

			</view>
			<view class="confirm" @click="confirm">
				确认购买
			</view>
		</modal>
	</view>
</template>

<script>
	import modal from '@/components/myModal/myModal'
	export default {
		components: {
			modal
		},
		data() {
			return {
				currentTicket: 0,
				combons: [{
					score: 260,
					tickets: 330
				}, {
					score: 360,
					tickets: 530
				}, {
					score: 660,
					tickets: 888
				}],
				quotes: [{
						date: '今天',
						account: '1560',
						quote: '6.72',
						plus: false
					},
					{
						date: '2020-5-20',
						account: '1160',
						quote: '5.72',
						plus: true
					},
					{
						date: '2020-5-19',
						account: '1360',
						quote: '6.72',
						plus: true
					}, {
						date: '2020-5-18',
						account: '1560',
						quote: '6.72',
						plus: false
					}, {
						date: '2020-5-17',
						account: '1560',
						quote: '6.72',
						plus: true
					}
				]
			};
		},
		methods: {
			clickItem(index) {
				this.currentTicket = index
			},
			buyIt() {
				this.$refs.buy.open()
			},
			confirm() {
				let combom=this.combons[this.currentTicket]
				let that=this
				uni.showModal({
					title:'购买确认',
					content:`您将花费${combom.score}积分，获得${combom.tickets}消费积分！`,
					cancelText:'再想想',
					confirmColor:'#ee5b25',
					success(res) {
						if(res.confirm){
							console.log('confirm')
						}else if(res.cancel){
							console.log('calcle')
						}
					},
					complete() {
						that.$refs.buy.close()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import './scoreMarket.scss';
</style>
